<route>
    {
        meta: {
            layout: 'index',
            title:'案例库'
        }
    }  
</route>
<template>
  <div>
    <a-space direction="vertical">
      <a-input v-model:value="query.searchKey" style="margin-left: 25px" size="large" @keyup.enter.native="getList(query)"
        placeholder="根据关键词查询">
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input>
    </a-space>
    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
      <template #renderItem="{ item }">
        <a-list-item key="item.title">
          <!-- 下载 -->
          <template #actions>
            <span v-for="{ icon, text } in actions" :key="icon">
              <a :href="`/dev-api/ufs/preview/${item.caseFileID}`">
                <component :is="icon" style="margin-right: 8px" />
                {{ text }}
              </a>
            </span>
          </template>
          <!-- 文件图片 -->
          <template #extra>
            <img v-if="item.fileType == 'docx' || item.fileType == 'doc'" width="160" alt="logo" :src="docx" />
            <img v-if="item.fileType == 'pptx'" width="160" alt="logo" :src="pptx" />
            <img v-if="item.fileType == 'pdf'" width="160" alt="logo" :src="pdf" />
          </template>
          <a-list-item-meta :description="item.description">
            <template #title>
              <a :href="`/dev-api/ufs/preview/${item.caseFileID}`">{{
                `${item.fileName} ${item?.wellId || ""} ${item.wellType || ""}`
              }}</a>
            </template>
            <template #avatar><a-avatar :src="item.avatar" /></template>
          </a-list-item-meta>
          {{ ` 遇卡原因：${item.jammingReason || "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}` }}<br />{{
            `摘要：${item.keyword || "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}`
          }}
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script setup>
import docx from "@/assets/images/docx.svg";
import pptx from "@/assets/images/pptx.svg";
import pdf from "@/assets/images/pdf.svg";
import { DownloadOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { queryList } from "@/api/salvage/case";
const listData = ref([]);
const query = ref({
  constructionPlanType: "",
  jammingReason: "",
  keyword: "",
  order: "ASC",
  pageNum: 1,
  pageSize: 10,
  sortBy: "updateTime",
  wellConstruct: "",
  wellId: "",
  wellLocation: "",
  wellType: "",
  searchKey: "",
});
const pagination = {
  onChange: (page) => {
    console.log(page);
  },
  pageSize: query.pageSize,
};
const actions = [
  {
    icon: DownloadOutlined,
    text: "下载",
  },
];
function getList(query) {
  queryList(query).then((res) => {
    // 提取queryList文件的扩展名
    res.content.forEach((item) => {
      let index = item.fileName.lastIndexOf("."); //获取索引位置
      console.log(index);
      item.fileType = item.fileName.substr(index + 1); //截取从最后一个点号的下一个字符开始到字符串末尾的子字符串
    });
    listData.value = res.content;
  });
}
getList(query.value);
</script>
